<template>
  <el-dialog
    v-model="dialogVisible"
    title="职业工种详情"
    width="800px"
    :before-close="handleClose"
    destroy-on-close
  >
    <div v-loading="loading" class="profession-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="职业代码">
          {{ professionData.professionCode }}
        </el-descriptions-item>
        <el-descriptions-item label="职业名称">
          {{ professionData.professionName }}
        </el-descriptions-item>
        <el-descriptions-item label="上级职业">
          {{ professionData.parentName || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="职业等级">
          <el-tag :type="getLevelTagType(professionData.professionLevel)">
            {{ getLevelText(professionData.professionLevel) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="适用技能等级" :span="2">
          <div class="skill-levels">
            <el-tag
              v-for="level in getSkillLevels(professionData.applicableLevels)"
              :key="level"
              class="mr-1"
              type="primary"
            >
              {{ level }}
            </el-tag>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="排序">
          {{ professionData.professionSort }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="professionData.professionStatus === 1 ? 'success' : 'danger'">
            {{ professionData.professionStatus === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="职业描述" :span="2">
          <div class="description-content">
            {{ professionData.professionDescription || '暂无描述' }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDateTime(professionData.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ formatDateTime(professionData.updateTime) }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 子职业列表 -->
      <div class="sub-professions" v-if="subProfessions.length > 0">
        <el-divider content-position="left">
          <span class="text-lg font-semibold">子职业</span>
        </el-divider>
        <el-table :data="subProfessions" stripe>
          <el-table-column prop="professionCode" label="职业代码" width="120" />
          <el-table-column prop="professionName" label="职业名称" width="200" />
          <el-table-column prop="professionLevel" label="等级" width="100">
            <template #default="scope">
              <el-tag :type="getLevelTagType(scope.row.professionLevel)">
                {{ getLevelText(scope.row.professionLevel) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="professionStatus" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.professionStatus === 1 ? 'success' : 'danger'">
                {{ scope.row.professionStatus === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter" />
        </el-table>
      </div>

      <!-- 关联的评价计划 -->
      <div class="related-plans" v-if="relatedPlans.length > 0">
        <el-divider content-position="left">
          <span class="text-lg font-semibold">关联的评价计划</span>
        </el-divider>
        <el-table :data="relatedPlans" stripe>
          <el-table-column prop="planCode" label="计划编码" width="120" />
          <el-table-column prop="planName" label="计划名称" width="200" />
          <el-table-column prop="planStatus" label="状态" width="100">
            <template #default="scope">
              <StatusTag :status="scope.row.planStatus" type="plan" />
            </template>
          </el-table-column>
          <el-table-column prop="startDate" label="开始时间" width="120" />
          <el-table-column prop="endDate" label="结束时间" width="120" />
          <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter" />
        </el-table>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit" v-if="professionData.id">
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { dateFormatter, formatDateTime } from '@/utils/formatTime'
import { 
  EvalProfessionVO, 
  getProfession,
  getProfessionListByParentId
} from '@/api/eval/profession'
import { getPlanListByProfessionCode } from '@/api/eval/plan'
import { StatusTag } from '@/components/Eval'

/** 职业工种详情 */
defineOptions({ name: 'ProfessionDetail' })

const dialogVisible = ref(false)
const loading = ref(false)
const professionData = ref<EvalProfessionVO>({})
const subProfessions = ref<EvalProfessionVO[]>([])
const relatedPlans = ref<any[]>([])

const emit = defineEmits<{
  edit: [id: number]
}>()

/** 打开详情弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  loading.value = true
  
  try {
    // 加载职业详情
    await loadProfessionDetail(id)
    
    // 加载子职业
    await loadSubProfessions(id)
    
    // 加载关联计划
    await loadRelatedPlans()
  } finally {
    loading.value = false
  }
}

/** 加载职业详情 */
const loadProfessionDetail = async (id: number) => {
  try {
    professionData.value = await getProfession(id)
  } catch (error) {
    console.error('加载职业详情失败:', error)
  }
}

/** 加载子职业 */
const loadSubProfessions = async (parentId: number) => {
  try {
    subProfessions.value = await getProfessionListByParentId(parentId)
  } catch (error) {
    console.error('加载子职业失败:', error)
    subProfessions.value = []
  }
}

/** 加载关联计划 */
const loadRelatedPlans = async () => {
  try {
    if (professionData.value.professionCode) {
      relatedPlans.value = await getPlanListByProfessionCode(professionData.value.professionCode)
    }
  } catch (error) {
    console.error('加载关联计划失败:', error)
    relatedPlans.value = []
  }
}

/** 获取等级标签类型 */
const getLevelTagType = (level: number) => {
  const typeMap = { 1: 'primary', 2: 'success', 3: 'warning', 4: 'danger' }
  return typeMap[level] || 'info'
}

/** 获取等级文本 */
const getLevelText = (level: number) => {
  const textMap = { 1: '大类', 2: '中类', 3: '小类', 4: '细类' }
  return textMap[level] || '未知'
}

/** 获取技能等级列表 */
const getSkillLevels = (levels: string) => {
  if (!levels) return []
  return levels.split(',').filter(Boolean)
}

/** 处理编辑 */
const handleEdit = () => {
  emit('edit', professionData.value.id!)
  handleClose()
}

/** 关闭弹窗 */
const handleClose = () => {
  dialogVisible.value = false
  professionData.value = {}
  subProfessions.value = []
  relatedPlans.value = []
}

/** 暴露方法 */
defineExpose({
  open
})
</script>

<style scoped>
.profession-detail {
  padding: 20px;
}

.skill-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.description-content {
  max-height: 100px;
  overflow-y: auto;
  line-height: 1.5;
  color: #606266;
}

.sub-professions,
.related-plans {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
}

.text-lg {
  font-size: 1.125rem;
}

.font-semibold {
  font-weight: 600;
}
</style>
